﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>浙江省安全生产监控中心服务平台</title>
	<meta name="description" content="安全监控">
	<meta name="keywords" content="table">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<meta name="apple-mobile-web-app-title" content="Amaze UI" />
	
	<link rel="icon" type="image/png" href="../assets/i/favicon.png">
	<link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">
	
	<link rel="stylesheet" href="../assets/css/amazeui.min.css"/>
	<link rel="stylesheet" href="../assets/css/admin.css">

	<link rel="stylesheet" href="../mstp_115_enonadmin/assets/css/bootstrap.css">
	<link rel="stylesheet" href="../mstp_115_enonadmin/assets/css/xenon-core.css"> 
	<link rel="stylesheet" href="../mstp_115_enonadmin/assets/css/custom.css">
	<link rel="stylesheet" href="../mstp_115_enonadmin/assets/css/fonts/fontawesome/css/font-awesome.min.css">
	 
	<script src="../assets/js/jquery.min.js"></script>
	<!-- <script src="../mstp_115_enonadmin/assets/js/jquery-1.11.1.min.js"></script> -->
	<!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
	<!-- <script src="http://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script> -->
	<!-- <script src="http://lib.sinaapp.com/?path=jquery/3.1.0/jquery-3.1.0.min.js"></script> -->
	<script src="../assets/js/amazeui.min.js"></script>
	<script src="../assets/js/app.js"></script>

	<!-- <script src="http://lib.sinaapp.com/?path=bootstrap/3.0.0/js/bootstrap.min.js"></script> -->
	<script src="../mstp_115_enonadmin/assets/js/bootstrap.min.js"></script>
	<script src="../mstp_115_enonadmin/assets/js/xenon-toggles.js"></script>
	<script src="../mstp_115_enonadmin/assets/js/xenon-custom.js"></script>
	<script src="../mstp_115_enonadmin/assets/js/resizeable.js"></script>
	
	<!-- <script src="../mstp_115_enonadmin/assets/js/TweenMax.min.js"></script> -->
	<!-- <script src="../mstp_115_enonadmin/assets/js/joinable.js"></script> -->
	<!-- <script src="../mstp_115_enonadmin/assets/js/xenon-api.js"></script> -->
	
	<!--=============Strat---百度地图相关静态资源=================-->
	<!--1.加载百度地图JS-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F3643ae048b499a5992aa0db0106b235"></script>
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!-- 加载百度地图样式信息窗口 -->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
	<!--=============End---百度地图相关静态资源=================-->
	
	<style>
		.admin-content{
			background:#ffffff;
		}
		.am-divider{
			margin:0.5rem;
		}
		#allmap {width:100%;height: 500px;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#chat > div  {
			background: #ffffff none repeat scroll 0 0;
		}
	</style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，本系统平台暂不支持。 请升级浏览器以获得更好的体验！</p>
<![endif]-->

	<header class="am-topbar admin-header">
	  <div class="am-topbar-brand">
		<strong>安全生产监控中心服务平台</strong> <small>Safety Monitoring Center Service Platform</small>
	  </div>

	  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

	  <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

		<ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
			<li>
				<a href="#" data-toggle="chat">
					<span class="am-icon-envelope-o"></span> 企业列表 
					<span class="am-badge am-badge-warning">105</span>
				</a>
			</li>
			<li>
				<a href="#siderbar_right" data-am-offcanvas>
					<span class="am-icon-envelope-o"></span> 侧边栏 
				</a>
			</li>
			<li class="am-dropdown" data-am-dropdown>
				<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
					<span class="am-icon-users"></span> 管理员 
					<span class="am-icon-caret-down"></span>
				</a>
				<ul class="am-dropdown-content">
					<li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
					<li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
					<li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
				</ul>
			</li>
		  <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
		</ul>
	  </div>
		<!--===================侧边栏START===============-->
		<div id="siderbar_right" class="am-offcanvas">
			<div class="am-offcanvas-bar">
				<div class="am-offcanvas-content">
					<p>
						你那张略带着 <br/>
						一点点颓废的脸孔 <br/>
						轻薄的嘴唇 <br/>
						含着一千个谎言
					</p>
				</div>
			</div>
		</div>
		<!--===================侧边栏END===============-->
	
	</header>

	<div class="am-cf admin-main">
		<div class="page-container">
					<!--===============start: Chat Section============== -->
					<div id="chat" class="fixed">
						<div class="chat-inner">
							<h2 class="chat-header">
								<a href="#" class="chat-close" data-toggle="chat">
									<i class="fa-plus-circle rotate-45deg"></i>
								</a>
								企业列表
								<span class="badge badge-success is-hidden">0</span>
							</h2>
							
							<script type="text/javascript">
								// Here is just a sample how to open chat conversation box
								$(document).ready(function($)
								{
									var $chat_conversation = $(".chat-conversation");
									$(".chat-group a").on('click', function(ev)
									{
										ev.preventDefault();
										$chat_conversation.toggleClass('is-open');
										$(".chat-conversation textarea").trigger('autosize.resize').focus();
									});
									
									$(".conversation-close").on('click', function(ev)
									{
										ev.preventDefault();
										$chat_conversation.removeClass('is-open');
									});
								});
							</script> 
								
							<div class="chat-group baiduMap-pois">
								<strong>Enterprise</strong>
								<!-- <a href="#"><span class="user-status is-online"></span> <em>Dennis E. Johnson</em></a>
								<a href="#"><span class="user-status is-online"></span> <em>Stuart A. Shire</em></a>
								<a href="#"><span class="user-status is-online"></span> <em>Janet I. Matas</em></a>
								<a href="#"><span class="user-status is-online"></span> <em>Mindy A. Smith</em></a>
								<a href="#"><span class="user-status is-busy"></span> <em>Herman S. Foltz</em></a> -->
							</div>
						</div>
						
						<!-- start------conversation template -->
						<div class="chat-conversation">
							
							<div class="conversation-header">
								<a href="#" class="conversation-close">
									&times;
								</a>
								
								<span class="user-status is-online"></span>
								<span class="display-name">Arlind Nushi</span> 
								<small>Online</small>
							</div>
							
							<ul class="conversation-body">	
								<li>
									<span class="user">Arlind Nushi</span>
									<span class="time">09:00</span>
									<p>Are you here?</p>
								</li>
								<li class="odd">
									<span class="user">Brandon S. Young</span>
									<span class="time">09:25</span>
									<p>This message is pre-queued.</p>
								</li>
								<li>
									<span class="user">Brandon S. Young</span>
									<span class="time">09:26</span>
									<p>Whohoo!</p>
								</li>
								<li class="odd">
									<span class="user">Arlind Nushi</span>
									<span class="time">09:27</span>
									<p>Do you like it?</p>
								</li>
							</ul>
							
							<div class="chat-textarea">
								<textarea class="form-control autogrow" placeholder="Type your message"></textarea>
							</div>
							
						</div>
						<!-- end------conversation template -->
					</div>
					<!-- ==============end: Chat Section ==================-->
					
		</div>
		
		<!-- content start -->
        <div class="admin-content ">
    
			<div class="am-cf am-padding">
				<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">安全监控大数据</strong> / <small>Information</small></div>
			</div>
			<hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
		
			<div class="am-g">
				<div class="row ">
			
					<div class="col-md-12 ">
						<!--地图容器-->
						<div id="allmap"></div>
						<div id="result">
							<input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
							<input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
							<input type="button" value="开启编辑" onclick = "enableEdit();"/>
							<input type="button" value="结束编辑" onclick = "disableEdit();"/>
							<input type="button" value="打印对象地理信息" onclick = "getGeoInfo();"/>
							<input id="open" type="button" value="危化图层"/>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<!-- content end -->
	</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="../assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->


<!--百度地图API功能-->
<script>
	var map;
	var customLayer;//自定义图层
	var toggleFlag = 0;//切换事件标志,默认为0
	//图层
	var eventObjs = [];
	var overlays = [];
	
	//创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
	  //addMapOverlay();//向地图添加覆盖物
      addMapControl();//向地图添加控件
	  addDrawingTool();//添加绘图工具条
	  toggleE();
    }
    function createMap(){
      map = new BMap.Map("allmap"); 
      map.centerAndZoom("杭州", 11);
	  map.setCurrentCity("杭州");
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom();
    }
    function addClickHandler(target,window){
		target.addEventListener("click",function(){
			target.openInfoWindow(window);
		});
    }
    function addMapOverlay(){
    }

	//向地图添加控件
    function addMapControl(){
		var size = new BMap.Size(60, 20);
		var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(scaleControl);
		var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(navControl);
		var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
		map.addControl(overviewControl);
		var cityControl = new BMap.CityListControl({
			anchor: BMAP_ANCHOR_TOP_LEFT,
			offset: size
		});
		map.addControl(cityControl);
		map.addControl(new BMap.MapTypeControl());//添加地图类型(卫星/三维)控件
    }
    
	//=============START==鼠标绘制功能============
	function addDrawingTool(){
		//1.新建图层数组回调函数
		var overlaycomplete = function(e){//回调函数
			eventObjs.push(e);
			overlays.push(e.overlay);
		};
		//2.定义绘制工具样式
		var styleOptions = {
			strokeColor:"red",    //边线颜色。
			fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight: 2,       //边线的宽度，以像素为单位。
			strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
			fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
			strokeStyle: 'solid' //边线的样式，solid或dashed。
		}
		//3.实例化鼠标绘制工具
		var drawingManager = new BMapLib.DrawingManager(map, {
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: true, //是否显示工具栏
			drawingToolOptions: {
				anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //位置
				offset: new BMap.Size(5, 5), //偏离值
			},
			circleOptions: styleOptions, //圆的样式
			polylineOptions: styleOptions, //线的样式
			polygonOptions: styleOptions, //多边形的样式
			rectangleOptions: styleOptions //矩形的样式
		}); 
		//4.添加鼠标绘制工具监听事件,用于获取绘制结果,将获取到的覆盖物对象加入数组
		drawingManager.addEventListener('overlaycomplete', overlaycomplete);
	}
		
	//5.清除所有覆盖物,onclick事件调用
	function clearAll() {
		for(var i = 0; i < overlays.length; i++){
			map.removeOverlay(overlays[i]);
		}
		overlays.length = 0   
	}
	//6.设置覆盖物对象可编辑
	function enableEdit(){
		for(var i = 0; i < overlays.length; i++){
			overlays[i].enableEditing();
		}
	}
	//7.设置覆盖物对象不可编辑
	function disableEdit(){
		for(var i = 0; i < overlays.length; i++){
			overlays[i].disableEditing();
		}
	}
	//8.遍历覆盖物地理信息
	function getGeoInfo(){
		for(var i = 0; i < overlays.length; i++){
			if("polygon"==eventObjs[i].drawingMode){
				var pointArray = overlays[i].getPath();
				var pointJson = "";
				for(var j = 0; j < pointArray.length; j++){
					if(j == pointArray.length-1){
						pointJson +="[" + pointArray[j].lng +","+ pointArray[j].lat + "]";
					}else{
						pointJson +="[" + pointArray[j].lng + ","+ pointArray[j].lat + "],";
					}
				}
				alert(pointJson);
			};
		}
	}
	//=============END==鼠标绘制功能==============
	//=============START==加载自定义图层============
	function addCustomLayer(keyword) {
		if (customLayer) {
			map.removeTileLayer(customLayer);
		}
		customLayer=new BMap.CustomLayer({
			geotableId: 48047,
			q: '', //检索关键字
			tags: '', //空格分隔的多字符串
			filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby
		});
		map.addTileLayer(customLayer);
		customLayer.addEventListener('hotspotclick',callback);//添加热点点击事件,调用callback()函数
	}	
	//回调函数,单击热点图层
	function callback(e){
		var customPoi = e.customPoi;//poi的默认字段
		var contentPoi=e.content;//poi的自定义字段
		var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '<br/>危化品:'+contentPoi.chemicals+'</p>';
		var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
			title: customPoi.title, //标题
			width: 290, //宽度
			height: 40, //高度
			panel : "panel", //检索结果面板
			enableAutoPan : true, //自动平移
			enableSendToPhone: true, //是否显示发送到手机按钮
			searchTypes :[
				BMAPLIB_TAB_SEARCH//,   //周边检索
				//BMAPLIB_TAB_TO_HERE,  //到这里去
				//BMAPLIB_TAB_FROM_HERE //从这里出发
			]
		});
		var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
		searchInfoWindow.open(point);
	}
	//删除自定义图层
	function removeCustomLayer(){
		if (customLayer) {
			map.removeTileLayer(customLayer);
		}
	}
	//切换添加、删除图层
	function toggleE(){
		$("#open").click(function(){
			if(toggleFlag == 0){
				addCustomLayer();
				toggleFlag = 1;
			}else{
				removeCustomLayer();
				toggleFlag = 0;
			}
		});
	}
	//=============END==加载自定义图层============
		
	//=======START==ajax异步请求百度云数据平台的企业poi信息====
	function getEnterpriseList(){
		$.get("http://api.map.baidu.com/geodata/v3/poi/list", 
			{
				ak : "F3643ae048b499a5992aa0db0106b235",
				geotable_id : "48047"
			}, 
			function(data, textStatus){
				var pois = data.pois;
				var $poisContainer = $(".baiduMap-pois");
				//<a href="#"><span class="user-status is-busy"></span> <em>Herman S. Foltz</em></a>
				for(var i = 0 ; i<data.size ; i++){
					var aEle = $("<a href='#'><span class='user-status is-online'></span> <em>"+pois[i].title+"</em></a>");
					$poisContainer.append(aEle);
				};
			},
			"jsonp"//处理跨域请求
		);
	};
	//=======END==ajax异步请求百度云数据平台的企业poi信息========
		$(document).ready(function()
		{
			initMap();
			getEnterpriseList();
			
		});
	</script>

</body>
</html>
